import { useState } from 'react'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { setMaxPrice, setMinPrice, setTheme, minPrice, maxPrice, theme, setVisibleToFalse } from '../../features/around/AroundSlice'
import style from './filterConditions.module.css'

export default function FilterConditions() {
  const dispatch = useAppDispatch()
  const curTheme = useAppSelector(theme)
  const minP = useAppSelector(minPrice)
  const maxP = useAppSelector(maxPrice)
  const [activeValue, setActiveValue] = useState<number>(0)
  const [minPriceValue, setMinPriceValue] = useState<number | string>('')
  const [maxPriceValue, setMaxPriceValue] = useState<number | string>('')

  const [themeConditions, setThemeConditions] = useState([
    { id: 1, title: '亲子游', active: false },
    { id: 2, title: '聚乐游', active: false },
    { id: 3, title: '生态游', active: false },
    { id: 4, title: '民俗游', active: false },
    { id: 5, title: '康养游', active: false },
    { id: 6, title: '研学游', active: false },
    { id: 7, title: '休闲游', active: false },
    { id: 8, title: '情侣游', active: false },
    { id: 9, title: '夜游', active: false }
  ])

  // 切换主题游选项
  function toggleThemeActive(id: number) {
    const newThemeConditions = themeConditions.map((t) => {
      if (t.id === id) {
        const active = t.active
        t.active = !active
      }
      return t
    })
    setThemeConditions(newThemeConditions)
  }

  // 切换价格选项
  function togglePriceActive(value: number) {
    if (activeValue === value) {
      setActiveValue(0)
    } else {
      setActiveValue(value)
    }
    if (minPriceValue !== '' || maxPriceValue !== '') {
      setMaxPriceValue('')
      setMinPriceValue('')
    }
  }

  // 设置最小值
  function SetMinPrice(e: any) {
    setMinPriceValue(e.target.value)
  }

  // 设置最大值
  function SetMaxPrice(e: any) {
    setMaxPriceValue(e.target.value)
  }
  // 重置价格
  function reset() {
    setActiveValue(0)
    setMaxPriceValue('')
    setMinPriceValue('')
  }

  // 提交
  function submit() {
    const newTheme = themeConditions
      .filter((t) => t.active)
      .map((t) => {
        return t.id + ''
      })
      .join(',')
    if (newTheme !== curTheme) {
      dispatch(setTheme(newTheme))
    }

    function dispatchSetPrice(min: string, max: string) {
      if (minP !== min || maxP !== max) {
        dispatch(setMinPrice(min))
        dispatch(setMaxPrice(max))
      }
    }
    switch (activeValue) {
      case 0:
        dispatchSetPrice('', '')
        break
      case 1:
        dispatchSetPrice('', '100')
        break
      case 2:
        dispatchSetPrice('100', '300')
        break
      case 3:
        dispatchSetPrice('300', '500')
        break
      case 4:
        dispatchSetPrice('500', '1000')
        break
      case 5:
        dispatchSetPrice('1000', '1500')
        break
      case 6:
        dispatchSetPrice('1500', '')
        break
    }
    dispatch(setVisibleToFalse(false))
  }

  return (
    <div className={style['filer-container']}>
      <div className={style['top-icon']} onClick={() => dispatch(setVisibleToFalse(false))}>
        <img src="/static/use/icon-down-closed-212.png" alt="" />
      </div>
      <div className={style['theme-condition']}>
        <h2>主题游</h2>
        <div className={style['theme-list']}>
          {themeConditions.map((t) => (
            <div className={`${style['theme-item']} ${t.active && style['price-active']}`} key={t.id} onClick={() => toggleThemeActive(t.id)}>
              {t.title}
            </div>
          ))}
        </div>
      </div>
      <div className={style['price-condition']}>
        <h2>按价格</h2>
        <div className={style['custom-price']}>
          <div className={style['min-price']}>
            <input value={minPriceValue} type="number" placeholder="最低价" onInput={(e) => SetMinPrice(e)} onFocus={() => setActiveValue(0)} />
          </div>
          <div className={style.middle}></div>
          <div className={style['max-price']}>
            <input value={maxPriceValue} type="number" placeholder="最高价" onInput={(e) => SetMaxPrice(e)} onFocus={() => setActiveValue(0)} />
          </div>
        </div>
        <div className={style['price-list']}>
          <div className={`${style['price-item']} ${activeValue === 1 && style['price-active']}`} onClick={() => togglePriceActive(1)}>
            <span>100以下</span>
          </div>
          <div className={`${style['price-item']} ${activeValue === 2 && style['price-active']}`} onClick={() => togglePriceActive(2)}>
            <span>100</span>
            <span>~</span>
            <span>300</span>
          </div>
          <div className={`${style['price-item']} ${activeValue === 3 && style['price-active']}`} onClick={() => togglePriceActive(3)}>
            <span>300</span>
            <span>~</span>
            <span>500</span>
          </div>
          <div className={`${style['price-item']} ${activeValue === 4 && style['price-active']}`} onClick={() => togglePriceActive(4)}>
            <span>500</span>
            <span>~</span>
            <span>1000</span>
          </div>
          <div className={`${style['price-item']} ${activeValue === 5 && style['price-active']}`} onClick={() => togglePriceActive(5)}>
            <span>1000</span>
            <span>~</span>
            <span>1500</span>
          </div>
          <div className={`${style['price-item']} ${activeValue === 6 && style['price-active']}`} onClick={() => togglePriceActive(6)}>
            <span>1500以上</span>
          </div>
        </div>
      </div>

      {/* 确定按钮和重置按钮 */}
      <div className={style['btn']}>
        <button className={style.reset} onClick={() => reset()}>
          重置
        </button>
        <button className={style.submit} onClick={() => submit()}>
          完成
        </button>
      </div>
    </div>
  )
}
